<template>
  <view class="checkin-container">
    <view class="header-section">
      <text class="page-title">签到打卡</text>
    </view>
    
    <view class="checkin-card">
      <view class="user-info">
        <image class="user-avatar" :src="userInfo.avatar || '/static/logo.png'" mode="aspectFill"></image>
        <view class="user-details">
          <text class="user-name">{{ userInfo.name }}</text>
          <text class="user-member-type">{{ userInfo.memberType }}</text>
        </view>
      </view>
      
      <view class="checkin-stats">
        <view class="stat-item">
          <text class="stat-value">{{ stats.totalDays }}</text>
          <text class="stat-label">累计签到(天)</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ stats.consecutiveDays }}</text>
          <text class="stat-label">连续签到(天)</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ stats.totalHours }}</text>
          <text class="stat-label">累计时长(小时)</text>
        </view>
      </view>
      
      <view class="checkin-button-container">
        <button 
          class="checkin-button" 
          :class="{ 'checked-in': isCheckedIn }"
          :disabled="isCheckedIn"
          @click="handleCheckin"
        >
          {{ isCheckedIn ? '已签到' : '立即签到' }}
        </button>
      </view>
    </view>
    
    <view class="checkin-history">
      <view class="section-title">签到记录</view>
      <view class="history-list">
        <view class="history-item" v-for="record in checkinHistory" :key="record.id">
          <text class="record-date">{{ record.date }}</text>
          <text class="record-time">{{ record.time }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { checkinApi } from '../../src/services/api'

// 用户信息
const userInfo = ref({
  name: '张三',
  avatar: '/static/logo.png',
  memberType: '年卡会员'
})

// 签到统计
const stats = ref({
  totalDays: 25,
  consecutiveDays: 3,
  totalHours: 42
})

// 是否已签到
const isCheckedIn = ref(false)

// 签到历史记录
const checkinHistory = ref([
  { id: 1, date: '2025-10-28', time: '08:30' },
  { id: 2, date: '2025-10-27', time: '08:45' },
  { id: 3, date: '2025-10-26', time: '09:00' },
  { id: 4, date: '2025-10-25', time: '08:20' },
  { id: 5, date: '2025-10-24', time: '08:35' }
])

// 页面加载时初始化
onMounted(() => {
  // 检查当前是否已签到
  checkCurrentCheckinStatus()
})

// 检查当前签到状态
const checkCurrentCheckinStatus = async () => {
  try {
    // 这里应该调用获取签到状态的API
    // const response: any = await checkinApi.getMyCheckins()
    // isCheckedIn.value = response.data.isCheckedIn
    console.log('检查签到状态')
  } catch (error) {
    console.error('检查签到状态失败:', error)
  }
}

// 处理签到
const handleCheckin = async () => {
  if (isCheckedIn.value) return
  
  try {
    uni.showLoading({
      title: '签到中...'
    })
    
    // 调用签到API
    const response: any = await checkinApi.checkin({
      type: 1 // 进馆签到
    })
    
    uni.hideLoading()
    uni.showToast({
      title: '签到成功',
      icon: 'success'
    })
    
    // 更新状态
    isCheckedIn.value = true
    stats.value.totalDays += 1
    stats.value.consecutiveDays += 1
  } catch (error: any) {
    uni.hideLoading()
    uni.showToast({
      title: error.message || '签到失败',
      icon: 'none'
    })
  }
}
</script>

<style lang="scss" scoped>
.checkin-container {
  min-height: 100vh;
  background-color: #FFFFFF;
  padding: 20rpx;
}

.header-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
}

.checkin-card {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.user-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  margin-right: 20rpx;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.user-member-type {
  font-size: 28rpx;
  color: #666;
}

.checkin-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #4B0082;
  display: block;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
}

.checkin-button-container {
  text-align: center;
}

.checkin-button {
  background-color: #4B0082;
  color: #fff;
  border: none;
  padding: 20rpx 60rpx;
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: bold;
  
  &:active {
    opacity: 0.8;
  }
  
  &:disabled {
    background-color: #ccc;
  }
}

.checked-in {
  background-color: #ccc !important;
}

.checkin-history {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.history-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
}

.record-date {
  font-size: 28rpx;
  color: #333;
}

.record-time {
  font-size: 28rpx;
  color: #666;
}
</style>